<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="true" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">球吧设置</text>
		</uni-nav-bar>
		<view class="body bottom-ios">
			<view class="bar-info card flex-c">
				<view class="info-top flex-r ac">
					<lazy-image class="avatar border-round" :src="barInfo.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
					<text class="text-primary">{{barInfo.title}}</text>
					<button type="default" @tap="$goByName('feedback')">举报</button>
				</view>
				<text class="info-bottom text-info" v-if="barInfo.intro">{{barInfo.intro}}</text>
			</view>
			<view class="bar-master card flex-c mt20">
				<view class="card-title flex-r ac jsb">
					<text class="title text-large">吧主/副吧</text>
					<view class="flex-r" @tap="$goByName('barmember')">
						<text class="text-small color-grey">查看球吧成员</text>
						<image class="right-icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
					</view>
				</view>
				<scroll-view scroll-x="true" class="scroll-X mt20">
					<view class="bar-list flex-r ac">
						<view class="user flex-c ac" v-for="(expert, index) in barInfo.manageForumUser" :key="index" @tap="goExpertHome(expert.userType, expert.userId)">
							<view class="user-avatar flex-c ac" :class="expert.roleType">
								<lazy-image class="avatar border-round" :src="expert.avatar+'?imageView2/1/w/100/h/100/q/50'" :type="expert.userType" fit="cover"></lazy-image>
								<image class="label-icon" :src="require('@/public/images/bar/'+expert.roleType+'.png')" mode="aspectFit"></image>
							</view>
							<text class="text-info mt20">{{expert.nickname}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bar-master card flex-c mt20" v-if="barInfo.forumUser && barInfo.forumUser[0]">
				<view class="card-title flex-r ac jsb">
					<text class="title text-large">分析师</text>
					<view class="flex-r" @tap="$goByName('barmember')">
						<text class="text-small color-grey">查看球吧成员</text>
						<image class="right-icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
					</view>
				</view>
				<scroll-view scroll-x="true" class="scroll-X mt20">
					<view class="bar-list flex-r ac">
						<view class="user flex-c ac" v-for="(expert, index) in barInfo.forumUser" :key="index" @tap="goExpertHome(expert.userType, expert.userId)">
							<view class="user-avatar flex-c ac" :class="expert.roleType">
								<lazy-image class="avatar border-round" :src="expert.avatar+'?imageView2/1/w/100/h/100/q/50'" :type="expert.userType" fit="cover"></lazy-image>
								<image class="label-icon" :src="require('@/public/images/bar/'+expert.roleType+'.png')" mode="aspectFit"></image>
							</view>
							<text class="text-info mt20">{{expert.nickname}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bar-auth publish card flex-c mt20">
				<view class="card-title flex-r ac">
					<text class="title text-large">发布权限</text>
				</view>
				<view class="auth-list pd20 flex-c">
					<view class="auth-item flex-r ac jsb">
						<text class="text-regular">允许本吧任何成员</text>
						<image class="allow-icon" src="@/public/images/bar/qxxz.png" mode="aspectFit" v-if="barInfo.sendRole == 1"></image>
					</view>
					<view class="auth-item flex-r ac jsb">
						<text class="text-regular">只允许吧主、副吧及已认证分析师发布</text>
						<image class="allow-icon" src="@/public/images/bar/qxxz.png" mode="aspectFit" v-if="barInfo.sendRole == 2"></image>
					</view>
					<template v-if="barInfo.sendBanInfo && barInfo.sendBanInfo.type == 1">
						<view class="auth-item flex-r ac jsb">
							<text class="text-regular">禁言</text>
							<view class="time-box text-regular color-grey flex-r ac">
								<text>开始时间：</text>
								<view class="time mr30 flex-r ac">
									<text class="color-red">{{barInfo.sendBanInfo.banStartTime}}</text>
								</view>
								<text>结束时间：</text>
								<view class="time flex-r ac">
									<text class="color-red">{{barInfo.sendBanInfo.banEndTime}}</text>
								</view>
							</view>
						</view>
						<view class="auth-item reason flex-r jsb">
							<text class="text-regular">禁言原因</text>
							<text class="text-secondary color-grey">{{barInfo.sendBanInfo.banDesc}}</text>
						</view>
					</template>
				</view>
			</view>
			<view class="bar-auth comment card flex-c mt20 mb20">
				<view class="card-title flex-r ac">
					<text class="title text-large">留言及回复权限</text>
				</view>
				<view class="auth-list pd20 flex-c">
					<view class="auth-item flex-r ac jsb">
						<text class="text-regular">允许任何人</text>
						<image class="allow-icon" src="@/public/images/bar/qxxz.png" mode="aspectFit" v-if="barInfo.replyRole == 1"></image>
					</view>
					<view class="auth-item flex-r ac jsb">
						<text class="text-regular">只允许本吧成员</text>
						<image class="allow-icon" src="@/public/images/bar/qxxz.png" mode="aspectFit" v-if="barInfo.replyRole == 2"></image>
					</view>
					<template v-if="barInfo.replyBanInfo && barInfo.replyBanInfo.type == 2">
						<view class="auth-item flex-r ac jsb">
							<text class="text-regular">禁言</text>
							<view class="time-box text-regular color-grey flex-r ac">
								<text>开始时间：</text>
								<view class="time mr30 flex-r ac">
									<text class="color-red">{{barInfo.replyBanInfo.banStartTime}}</text>
								</view>
								<text>结束时间：</text>
								<view class="time flex-r ac">
									<text class="color-red">{{barInfo.replyBanInfo.banEndTime}}</text>
								</view>
							</view>
						</view>
						<view class="auth-item reason flex-r jsb">
							<text class="text-regular">禁言原因</text>
							<text class="text-secondary color-grey">{{barInfo.replyBanInfo.banDesc}}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barId: null,
				barInfo: {}
			};
		},
		onLoad() {
			if(this.$Route.query.bid){
				this.barId = this.$Route.query.bid
				this.getBarInfo()
			}
		},
		methods: {
			//查询球吧基本信息
			getBarInfo() {
				this.$http.get({
					url: '/api/forum/queryById',
					data: {
						id: this.barId
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.barInfo = data.result
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//进入专家主页
			goExpertHome(userType, expertId) {
				if(userType == 'expert'){
					this.$CHS.goExpertHome(expertId)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		.card{
			background-color: #fff;
			padding: 20rpx;
		}
		.bar-info{
			.info-top{
				.avatar{
					width: 80rpx;
					height: 80rpx;
				}
				.text-primary{
					flex: 2;
					margin-left: 20rpx;
					font-weight: 500;
				}
				button{
					width: 96rpx;
					height: 48rpx;
					background: #FFE5E5;
					border-radius: 24rpx;
					line-height: 48rpx;
					font-size: 24rpx;
					color: #F23030;
					margin: 0;
					padding: 0;
					box-sizing: border-box;
				}
			}
			.info-bottom{
				margin-top: 20rpx;
				line-height: 32rpx;
			}
		}
		.bar-master{
			padding: 30rpx 0;
			.card-title{
				padding: 0 20rpx;
				.title{
					font-weight: 500;
				}
				.right-icon{
					width: 24rpx;
					height: 26rpx;
				}
			}
			.scroll-X{
				width: 100%;
				white-space: nowrap;
				.bar-list{
					width: fit-content;
					.user{
						width: 128rpx;
						.user-avatar{
							position: relative;
							height: 88rpx;
							border-radius: 50%;
							.avatar{
								width: 88rpx;
								height: 88rpx;
								border: 2rpx solid #FFF;
								box-sizing: border-box;
							}
							.label-icon{
								position: absolute;
								bottom: -8rpx;
								width: 64rpx;
								height: 24rpx
							}
							&.bz{
								border: 2rpx solid #F23030;
							}
							&.fb{
								border: 2rpx solid #4C88FF;
							}
							&.fxs{
								border: 2rpx solid #43BF85;
							}
						}
					}
					.user:first-child{
						margin-left: 20rpx;
					}
					.user:last-child{
						margin-right: 20rpx;
					}
				}
			}
		}
		.bar-auth{
			padding: 0;
			.card-title{
				padding: 0 20rpx;
				height: 88rpx;
				border-bottom: 1rpx solid #ededed;
				box-sizing: border-box;
				.title{
					font-weight: 500;
				}
			}
			.auth-list{
				.auth-item{
					padding: 30rpx 0;
					.allow-icon{
						width: 40rpx;
						height: 40rpx;
					}
					.time-box{
						.time{
							&.mr30{
								margin-right: 30rpx;
								
							}
							margin-left: 10rpx;
							image{
								margin-left: 12rpx;
								width: 16rpx;
								height: 16rpx;
							}
						}
					}
					&.reason{
						.text-regular{
							line-height: 40rpx;
						}
						.text-secondary{
							max-width: 550rpx;
							line-height: 40rpx;
						}
					}
				}
				
			}
		}
	}
</style>
